<template>
  <div class="app-container">
    <div class="main-box">
      <div class="card-box" v-loading="loading">
        <div class="card-slide">
          <div class="slide-tab" v-if="workOrderInfo">
            <el-descriptions class="margin-top"  :column="4" border>
              <template slot="extra"><el-button type="primary" size="small" plain @click="callBack">返 回</el-button></template>
              <el-descriptions-item label="工单状态" :span="2" ><span >{{ dict.label.work_status[workOrderInfo.workStatus] }}</span></el-descriptions-item>
              <el-descriptions-item label="所属机构"  :span="2"  ><span >{{ dict.label.enterprise_list[workOrderInfo.enterpriseCode] }}</span></el-descriptions-item>
<!--              <el-descriptions-item label="所属类型" ><span>{{ dict.label.work_classification[workOrderInfo.questionClassification] }}</span></el-descriptions-item>-->
              <el-descriptions-item label="所属分类">  <span>{{ dict.label.work_type[workOrderInfo.questionType] }}</span></el-descriptions-item>
              <el-descriptions-item label="提问人" >{{ workOrderInfo.startUser }}</el-descriptions-item>
              <el-descriptions-item label="提问日期" ><span>{{ workOrderInfo.startTime}}</span></el-descriptions-item>
              <el-descriptions-item label="所用工时(天/人)" ><span>{{ workOrderInfo.workHours}}</span></el-descriptions-item>
              <el-descriptions-item label="创建日期" ><span>{{ workOrderInfo.createTime}}</span></el-descriptions-item>
              <el-descriptions-item label="处理人" >{{ workOrderInfo.endUser }}</el-descriptions-item>
              <el-descriptions-item label="处理日期" ><span>{{ workOrderInfo.createTime}}</span></el-descriptions-item>
              <el-descriptions-item label="创建人" ><span>{{ workOrderInfo.createBy}}</span></el-descriptions-item>
              <el-descriptions-item label="创建时间" ><span>{{ workOrderInfo.createBy}}</span></el-descriptions-item>
              <el-descriptions-item label="更新人" ><span>{{ workOrderInfo.createBy}}</span></el-descriptions-item>
              <el-descriptions-item label="更新时间" ><span>{{ workOrderInfo.createBy}}</span></el-descriptions-item>
              <el-descriptions-item label="工单备注" :span="4" ><span>{{ workOrderInfo.remark}}</span></el-descriptions-item>
              <el-descriptions-item label="问题描述" :span="4"   >
              <el-input type="textarea" :rows="12" v-model="workOrderInfo.questionDescription" />
              </el-descriptions-item>
              <el-descriptions-item label="解决办法"  :span="4"   >
                <el-input type="textarea" :rows="12" v-model="workOrderInfo.questionSolution"/>
              </el-descriptions-item>

            </el-descriptions>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  import { findWorkOrderDetailById } from '../../../api/workOrder/workOrderDetail'

  export default {
    name: 'SecondDetail',
    dicts: ['work_type', 'enterprise_list', 'work_status'],
    data() {
      return {
        workOrderInfo: {},
        loading:false
      }
    },

    mounted() {
      this.getDataById(this.$route.query.workDetailId)
    },

    methods: {
      // 获取明细id
      getDataById(id) {
        this.loading=true
        findWorkOrderDetailById(id).then(res => {
          this.workOrderInfo = res
          this.loading=false
        })
      },
      // 返回
      callBack(){
        this.$router.back();
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .margin-top {
    margin-top: -1px;
  }

  .app-container {
    width: inherit;
    min-height: calc(100vh - 84px);
    background-color: #f7f7f7;
    box-sizing: border-box;

    .main-box {
      background-color: #fff;
      padding: 20px;
      box-sizing: border-box;
      min-height: calc(100vh - 84px - 40px);



      .card-box {
        .card-title {
          display: flex;
          align-items: center;
          margin: 20px 0;

          span {
            margin-left: 5px;
            color: #3EB0FF;
            font-size: 18px;
            font-weight: 600;
          }
        }

        .slide-tab {
          :deep(.el-descriptions) {
            .el-descriptions__body {
              .el-descriptions__label {
                width: 100px;
                color: #999;
              }

              .el-descriptions__content {
                min-width: 200px;
              }
            }
          }
        }
      }
    }
  }
</style>
